<script setup lang="ts">
import {NSplit, NCollapse, NCollapseItem} from 'naive-ui'
import PanelTab from "@/components/PanelTab.vue";
import {onMounted} from "vue";
import useGraph from "@/views/DrawMain/useGraph.ts";
function mouseOverHandler(e: MouseEvent) {
  const suspend = document.querySelector('.suspend') as HTMLDivElement;
  suspend.style.display = 'flex';
  // 获取当前鼠标停留的元素
  const target = e.currentTarget as HTMLDivElement;
  const img = suspend.querySelector('img') as HTMLImageElement;
  const targetImg = target.querySelector('img') as HTMLImageElement;
  img.src =  targetImg.src;
  // 设置悬浮框的位置
  // const x = e.clientX;
  const y = e.clientY;
  // 还要减去其父元素在页面中的位置
  const py = suspend.parentElement?.getClientRects()[0].y ?? 0;
  suspend.style.top = y - 75 - py + 'px' ;
}
function mouseOutHandler() {
  const suspend = document.querySelector('.suspend') as HTMLDivElement;
  suspend.style.display = 'none';
}
onMounted(()=> {
  const l = document.querySelector('.n-split-pane-1') as HTMLDivElement;
  if(l) {
    l.style.overflow = 'visible'
  }
  useGraph();
})
</script>

<template>
  <n-split direction="horizontal" style="overflow: visible" class="n-split-style" :default-size="0.18" :max="0.5" :min="0.18">
    <template #1>
      <PanelTab :count="2" :titles="['图形', '风格']" max-height="100%">
        <template #0>
          <div class="drag-list">
            <n-collapse display-directive="show" :expanded-names="['1']">
              <n-collapse-item title="基础图形" name="1" display-directive="show" >
                <template #header>
                  <h1 style="font-size: 14px">基础图形</h1>
                </template>
                <div class="shape-list">
                  <div class="shape-item" v-for="(it, index) in 20" :key="index"
                        @mouseover="mouseOverHandler" @mouseleave="mouseOutHandler"
                  >
                    <div class="image">
                      <img class="graph-drag-shape" src="/images/earth.png">
                    </div>
                  </div>
                </div>
              </n-collapse-item>
              <n-collapse-item title="白银" name="2">
                <div>很好</div>
              </n-collapse-item>
              <n-collapse-item title="黄金" name="3">
                <div>真棒</div>
              </n-collapse-item>
            </n-collapse>
            <div class="suspend">
              <div class="image">
                <img src=""/>
              </div>
              <p class="desc">

              </p>
            </div>
          </div>
        </template>
        <template #1>
          theme
        </template>
      </PanelTab>
    </template>
    <template #2>
      <div class="graph-container">
        <div id="graph">

        </div>
      </div>
    </template>
  </n-split>
</template>

<style scoped lang="scss">


.n-split-style {
  width: 100%;
  max-height: calc(100% - $footerHeight - 110px);
  @include borderM;
}
.drag-list {
  position: relative;
  @include fullWH;
  background-color: #f6f7ff;
  // 禁止选中文字
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE 10+/Edge */
  user-select: none;         /* 标准语法 */
  //overflow: ;
}
.suspend {
  z-index: 999;
  position: absolute;
  top: 0;
  right: 0;

  width: 160px;
  height: 150px;
  border-radius: 10px;
  border: 1px solid #e4e7f0;
  transform: translateX(105%);
  background-color: $mainCor;

  display: flex;
  display: none;
  column-gap: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  .image {
    width: 100px;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .desc {
    width: 100px;
    height: 30px;
    background-color: #f6f7ff;

  }
}
.shape-list {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
}
.shape-item {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.graph-container {
  padding: 12px 12px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: $padCor;
}
#graph {
  position: relative;
  @include fullWH;
  background: url("/grid.gif") repeat;
  background-color: #fff;
}
</style>